<template>
	<view class="com_styles">

		<!-- tabs -->
		<view class="com_segment_main">
			<uni-segmented-control :current="current" @clickItem="onClickMenus" :values="menuItems" styleType="text" activeColor="#F15F35">
			</uni-segmented-control>
		</view>

		<!-- 内容 -->
		<view class="com_segment_content">
			<view v-show="current === 0">
				<!-- 标签选择 -->
				<view class="com_tag_main">
					<Tags v-for="item in TagList" :listItem="item" :click="clickItem" />
				</view>
				
				<view class="com_article_main">
					<ArticleShow v-for="item in articlesList" :item="item" @click="clickArticleItem(item)"/>
				</view>
			</view>
			<view v-show="current === 1">
				<ExperienceCard v-for="item in experienceList" :item="item" />
				<view class="add-experience" @click="publish"><image src="../../static/plus.png"/></view>
			</view>
		</view>
	</view>
</template>

<script>
	import Tags from '@/components/Tags.vue'
	import ArticleShow from '@/components/ArticleShow.vue'
	import ExperienceCard from '@/components/ExperienceCard.vue'
	export default {
		components: {
			Tags,
			ArticleShow
		},
		data() {
			return {
				name: "拉布拉多肉",
				current: 0,
				menuItems: ["文章", "经验"],
				TagList: [{
						name: "精华文章精华文章"
					}, {
						name: "专业"
					}, {
						name: "职业解读"
					},
					{
						name: "心里资讯"
					},
					{
						name: "职业解读"
					},
					{
						name: "职业解读"
					},
					{
						name: "职业解读"
					},
				],
				articlesList: [
					{ url: "../static/logo.png", des: "孩子内向不可怕，怕的是养成“回避型人格”，这些表现爸妈要注意", date: "10-26 22:24", count: "2398", tags:["艺术", "精神", "内心世界"]},
					{ url: "../static/logo.png", des: "嗨，我想给你说 | 分享欲是最高级别的浪漫主义", date: "10-26 22:24", count: "2398", tags:["艺术", "内心世界"]},
					{ url: "../static/logo.png", des: "孩子内向不可怕，怕的是养成“回避型人格”，这些表现爸妈要注意", date: "10-26 22:24", count: "2398",tags:["艺术", "内心世界"] },
				],
				experienceList: [
					{ title: "你家孩子不爱吃饭，可以试试这样做", images: ["../static/logo.png", ], tags: ["吃饭", "生活习惯"], date: "10-26 22:24", icon: "../static/logo.png", name: "一只忧郁的阿黄", des: "大家好，我是小黄妈妈，自从我在百度贴吧里写了我家小宝厌食改变成功的经历。每天都有无数网友问我针对小孩怎么好的方法。但由于精力有限，我无法一个一…" },
					{ title: "你家孩子不爱吃饭，可以试试这样做", images: ["../static/logo.png","../static/logo.png","../static/logo.png" ], tags: ["吃饭"], date: "10-26 22:24", icon: "../static/logo.png", name: "一只忧郁的阿黄", des: "大家好，我是小黄妈妈，自从我在百度贴吧里写了我家小宝厌食改变成功的经历。每天都有无数网友问我针对小孩怎么好的方法。但由于精力有限，我无法一个一…" }
				]
			}
		},
    mounted () {
		  console.log('tes:')
    },
		methods: {
			clickItem: function(item) {
				console.log(item, 'item')
			},
			onClickMenus: function(item) {
				this.current = item.currentIndex
			},
			clickArticleItem: function(item) {
				let params = JSON.stringify(item)
				uni.navigateTo({
					url:'../ArticleItem/ArticleItem?params=' + params
				})
			},
			publish(){
				uni.navigateTo({
					url:'../publish/publish'
				})
			}
		}
	}
</script>

<style>
	.com_styles {
		width: 100%;
		position: relative;
	}

	.com_segment_main {
		width: 40%;
		height: 100rpx;
		margin: auto;
	}
	
	.com_segment_content {
		width: 100%;
	}

	.com_tag_main {
		height: 100rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: auto;
	}
	
	.com_article_main {
		width: 100%;
	}
	.add-experience{
		position:fixed;
		right:16rpx;
		bottom:256rpx;
		width:136rpx;
		height:136rpx;
	}
	.add-experience image{
		width:100%;
		height:100%;
	}
</style>
